<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>交易所互动</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
    .exchangeInteraction-header {
        padding:0.22rem 0.32rem 0.26rem;
        font-family: PingFangSC-Medium;
        font-size: 0.32rem;
        letter-spacing: 0;
        text-align: center;
        position: fixed;
        z-index: 1;
        width: 100%;
      }
      .exchangeInteraction-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .exchangeInteraction-list {
        padding-top: 0.9rem;
      }
      .exchangeInteraction-list ul {
          list-style: none;
          margin: 0;
          padding: 0;
      }
      .exchangeInteraction-list ul li {
        /* background: #fff; */
        padding: 0.4rem 0.32rem ;
        /* margin-bottom: 0.14rem; */
        position: relative;
      }
      .exchangeInteraction-list ul li .exchangeInteraction-list-title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .exchangeInteraction-list ul li .exchangeInteraction-list-title img{
        width: 0.32rem;
        height: 0.32rem;
        vertical-align: middle;
        margin-right: 0.08rem;
      }
      .exchangeInteraction-list ul li .reply {
          margin-top: 0.2rem;
          margin-bottom: 0.3rem;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
      }

      .exchangeInteraction-list ul li .reply .namespan{
          color: #528DBF;
          margin-right: 0.04rem;
      }
      .exchangeInteraction-list ul li .operate {
        position: relative;
        height: 0.42rem;
      }

      .exchangeInteraction-list ul li .operate .box1 .line{
          margin-left: 0.2rem;
          margin-right: 0.2rem;
      }
      .exchangeInteraction-list ul li .operate .box2 img{
          width: 0.32rem;
          height: 0.32rem;
          vertical-align: middle;
      }
      .exchangeInteraction-list ul li .operate .box2 .count {
          display: inline-block;
          vertical-align: middle;
          margin-left: 0.06rem;
      }
      .exchangeInteraction-list ul li .operate .box2 .count1{
          margin-right: 0.2rem;
      }
      .exchangeInteraction-list ul li::after{
    content: '';
    width: 100%;
    height: 0.14rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .exchangeInteraction-list ul li .exchangeInteraction-list-title span{
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    line-height: 0.32rem;
    vertical-align: middle;
  }
  .exchangeInteraction-list ul li .reply span{
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.4rem;
  }
  .exchangeInteraction-list ul li .operate .box1{
    position: absolute;
    left: 0;
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    line-height: 0.42rem;
  }
  .exchangeInteraction-list ul li .operate .box2{
    position: absolute;
    right: 0;
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    line-height: 0.42rem;
  }
  .mescroll{
			position: fixed;
			top: 0;
			bottom: 0;
			height: auto;
		}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->
  <!-- 头部 -->
  <div class="exchangeInteraction-header">
    <img src="../../images/allPic/jiantou.png"  alt="" onclick='closeWindow()' class="headerimg">
      交易所互动
  </div>

  <!-- 交易所互动列表 -->
  <div class="exchangeInteraction-list mescroll" id='mescroll'>
    <ul></ul>
  </div>

</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let funcCode
  let token
  let pageNum = 1
  let hasNext = true
  let mescroll
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    funcCode = params.funcCode
    console.log(params)

    //设置深色模式
    if(configColorType === '1'){
        $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
        $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

    mescroll = new MeScroll('mescroll',{
      down: {
            use: false
				  },
      up:{
        pageNum: pageNum,
        callback:getList,
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多数据 --</p>',
        noMoreSize: 10
      }
    })

    $('.exchangeInteraction-list ul').empty()
    // getList(params)
    //页面加载获取token用于判断是否可以评论或者点赞
    jsBridge.getData('token').then(res => {
      // console.log(res)
      token = res
    })

  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    jsBridge.getData('token').then(res => {
      console.log(res)
      token = res
    })
    pageNum = 1
    $('.exchangeInteraction-list ul').empty()
    getList({'pageNum':1})
  }
  //获取列表
  function getList(params){
    // Server.InteractionDetails.getDetails({'funcCode':params.funcCode,'pageNum':'1','pageSize':'5'}).then(res => {
    Server.InteractionList.getDetails({'funcCode':'005001','pageNum':params.pageNum||pageNum,'pageSize':10}).then(res => {
      console.log(res)
      if(res.code === 0){
        let detail = res.list
            //判断是否有下一页
            if(detail.length < 10){
              hasNext = false
            }else{
              pageNum++
              hasNext = true
            }

            detail.map((item,index) => {
                let creatTime = item.issuerDttm*1000
                let nowTime = +new Date().valueOf()
                let year = new Date(creatTime).getFullYear()
                let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
                let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
                let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
                let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
                if(nowTime - creatTime < 30*60*1000){
                  if(nowTime - creatTime < 1*60*1000){
                    item.issuerDttm = '刚刚'
                  }else{
                    item.issuerDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
                  }
                }else if(nowTime - creatTime < 24*60*60*1000){
                    if(nowTime-creatTime < 60*60*1000){
                      item.issuerDttm = '1小时前'
                    }else {
                      item.issuerDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                    }
                }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
                  item.issuerDttm = '昨天'+hour+":"+minute
                }else{
                  item.issuerDttm =year+'-'+ month+'-'+day+' '+hour+':'+minute
                }
            })

            detail.map((item,index) => {
              let li =
                    `<li onclick="godetails('${item.infoId}')">
                        <div class="exchangeInteraction-list-title">
                            <img src="../../images/allPic/tiwen.png" alt="">
                            <span>${item.mainTitle}</span>
                        </div>
                        <div class="reply">
                            <span class="namespan">${item.owner}</span><span>回复：</span>
                            <span>${item.interactionIntroduce}</span>
                        </div>
                        <div class="operate">
                            <div class="box1">
                                <span>${item.issuerDttm}</span>
                            </div>
                            <div class="box2">
                                  <img src="${configColorType==='1'?'../../images/allPic/blackfenxiang.png':'../../images/allPic/xiaofenxiang.png'}" alt=""  onclick="goShare({'title':'${item.mainTitle}','content':'${item.interactionIntroduce}','infoId':'${item.infoId}'},this)">
                                  <span class="count1 count">${item.shareCut?item.shareCut:0}</span>
                                <img src="${configColorType==='1'?'../../images/allPic/blackpinglun.png':'../../images/allPic/xiaopinglu1.png'}" alt="" onclick="goComment('${item.infoId}')">
                                <span class="count1 count">${item.participantsCnt}</span>
                                <div style='display:inline-block;vertical-align:middle;'>
                                  <img src="${configColorType==='1'?'../../images/allPic/blackdianzan.png':'../../images/allPic/nodianzan1.png'}" alt="" data-status='1'  onclick="priase({'status':'${item.thumbsupStatus==='0'?'1':'0'}','thumbupObjectId':'${item.infoId}'},this)" style="display:${item.thumbsupStatus === '1'?'none':'block'}">
                                  <img src="../../images/allPic/yidianzan1.png" alt="" data-status='0'  onclick="priase({'status':'${item.thumbsupStatus==='1'?'0':'1'}','thumbupObjectId':'${item.infoId}'},this)" style="display:${item.thumbsupStatus === '1'?'block':'none'}">
                                </div>
                                  <span class="count">${item.thumbsupCnt}</span></div>
                        </div>
                    </li>`
                    $('.exchangeInteraction-list ul').append(li)
            })
                mescroll.endSuccess(10, hasNext)
      }else if(res.code === -8){
        // jsBridge.toast('数据异常')
            jsBridge.delData('token')
            token = ''
            jsBridge.toast('登录过期，请重新登录')
      }else{

      }
    })
  }
  // 点击每一项进入详情页,不弹框isopencomment=0
  function godetails(params){
      jsBridge.openWindow('/html/interaction/Interactiondetails.html?infoId='+params+'&isopencomment=0',{}, {noBar: false})
  }
  //点击评论评论,点击进入详情页面，自己给了个弹框标识isopencomment=1
  function goComment(params){
    event.stopPropagation()
    // console.log(params)
    if(token){
      jsBridge.openWindow('/html/interaction/Interactiondetails.html?infoId='+params+'&isopencomment=1',{}, {noBar: false})
    }else {
      // jsBridge.toast('暂未登录,请先登录...')
      jsBridge.openLogin()
    }
  }
  //点赞
  function priase(params1,params2){
    event.stopPropagation()
    // console.log(params1,params2)
    if(token){
        let status = $(params2).attr('data-status')
        if(status === '1'){
          let num = $(params2).parent().next().text()
          $(params2).parent().next().text(+num+1)
          //刷新原生页面的点赞状态
          let ysNum = +num + 1
          jsBridge.updateStatus({'type':'hudong','name':'zanjia','infoId':params1.thumbupObjectId,'value':ysNum})
        }else{
          let num = $(params2).parent().next().text()
          $(params2).parent().next().text(+num-1)
          //刷新原生页面的点赞状态
          let ysNum = +num - 1
          jsBridge.updateStatus({'type':'hudong','name':'zanjian','infoId':params1.commentObjectId,'value':ysNum})
        }
        $(params2).hide().siblings().show()
        Server.InteractionPriase.updatePriase({thumbup:{'status':status,'thumbupObjectId':params1.thumbupObjectId,'datasource':1,'objectSource':'4'}}).then(res => {
        console.log(res,'update')
        if(res.code === 0){
          //点赞成功切换图标的状态
          //重新请求数据
          // $('.exchangeInteraction-list ul').empty()
          // pageNum = 1
          // getList({'funcCode':funcCode,'pageNum':'1','pageSize':'5'})
          // getList({'funcCode':'005001','pageNum':pageNum,'pageSize':5})
        }else{
          // jsBridge.toast(res.msg)
        }
      })
    }else{
      // jsBridge.toast('暂未登录,请先登录...')
      jsBridge.openLogin()
    }
  }
  //分享
  function goShare(params1,params2){
    // console.log(params)
    event.stopPropagation()
        Server.infoShare.share({'infoId':params1.infoId,'datasource':'1','objectSource':'5'}).then(res => {
        console.log(res,'share')
        if(res.code === 0){
          let count  = $(params2).next().text()
          $(params2).next().text(+count+1)
        }
      })
      //分享
      jsBridge.share({'scene':'0,1','type':'url','url':shareUrl+'/html/interaction/Interactiondetails.html?infoId='+params1.infoId,'title':params1.title,'content':params1.content,'image':''})
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  // document.addEventListener('scroll',function(){
  //   let top = $('.exchangeInteraction-list ul').offset().top
  //   let height = $('.exchangeInteraction-list ul').height()
  //   let maxHeight = document.body.offsetHeight
  //   let scroll = $(document).scrollTop()
  //   if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
  //     pageNum++
  //     getList({'pageNum':pageNum})
  //   }
  // })
</script>
</html>
